<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="crud.cancelCU"
    :visible="crud.status.cu > 0"
    :title="crud.status.title"
    :top="'10vh'"
    width="700px"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      :inline="true"
      label-width="120px"
    >
      <el-form-item label="栏目图标" prop="icon" style="width: 500px;">
        <el-upload
          style="border: 1px solid #d9d9d9;border-radius: 3px;"
          class="avatar-uploader"
          :action="imagesUploadApi"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.icon" :src="form.icon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item label="栏目名称" prop="columnName">
        <el-input
          v-model="form.columnName"
          style="width: 180px"
        />
      </el-form-item>
      <el-form-item label="请选择模版" prop="templateType">
        <el-select v-model="form.templateType" placeholder="请选择模版" @change="changeSelect">
          <el-option
            v-for="item in this.dict.column_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否可设置" prop="isSet">
        <el-radio-group v-model="form.isSet">
          <el-radio
            v-for="item in this.dict.whether_type"
            :key="item.id"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="服务对象" prop="fwdx">
        <el-checkbox-group v-model="fwdx" size="small">
          <el-checkbox v-for="item in dict.service_dx" :key="item.id" :border="true" :label="item.value">{{
            item.label
          }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="form.description"
          style="width: 500px"
        />
      </el-form-item>
      <el-form-item label="状态" prop="sysState">
        <el-radio-group v-model="form.sfqy">
          <el-radio
            v-for="item in this.dict.state_type"
            :key="item.id"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="显示更多" prop="isMore">
        <el-radio-group v-model="form.isMore">
          <el-radio
            v-for="item in this.dict.whether_type"
            :key="item.id"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="text"
        @click="crud.cancelCU"
      >
        取消
      </el-button>
      <el-button
        :loading="crud.status.cu === 2"
        type="primary"
        @click="crud.submitCU"
      >
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import CRUD, { form } from '@crud/crud';
import { mapGetters } from 'vuex';

const defaultForm = {
  columnName: null,
  id: null,
  icon: null,
  templateType: null,
  description: null,
  sfqy: 'true',
  isMore: 'false',
  isSet: 'true',
  kfdx: '',
  px: 0
};
export default {
  name: 'ColumnForm',
  mixins: [form(defaultForm)],
  // 数据字典
  dicts: ['state_type', 'column_type', 'service_dx', 'whether_type'],
  computed: {
    ...mapGetters(['imagesUploadApi'])
  },
  watch: {
    menuKey() {
      ++this.menuKey;
    },
    fwdx: {
      handler(newName, oldName) { // 值发生变化时
        this.form.kfdx = newName.toString();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: true // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    this.formType = this.form.templateType;
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      form.sfqy = form.sfqy.toString();
      form.isMore = form.isMore.toString();
      form.isSet = form.isSet.toString();
      if (form.kfdx != null && form.kfdx !== '') {
        this.fwdx = form.kfdx.split(',');
      }
    },
    changeSelect(event, item) {
      this.formType = event;
    },
    changeRules(rules) {
      this.rules = rules;
    },
    handleAvatarSuccess(res, file) {
      this.form.icon = res.url;
    },
    handleAvatarError(err, file) {
      this.$message.error(err);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }

  },
  data() {
    return {
      fwdx: [],
      rules: {
        columnName: [
          { required: true, message: '请输入栏目名称', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '栏目图标不能为空', trigger: 'blur' }
        ],
        compType: [
          { required: true, message: '请选择模版', trigger: 'blur' }
        ]
      },
      formType: null,
      menuKey: 1
    };
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF !important;
}

.avatar-uploader-icon {
  font-size: 16px;
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.avatar {
  width: 40px;
  height: 40px;
  display: block;
}
</style>
